<template>
  <main class="home-page">
    <!-- 英雄/横幅部分 - 网站主要视觉焦点 -->
    <section class="hero-section">
      <div class="container">
        <div class="hero-content">
          <h1 class="hero-title">定制专属于您的花艺体验</h1>
          <p class="hero-description">
            精选优质花材，专业花艺师设计，为您打造独一无二的花束
          </p>
          <p class="hero-description">
            唤醒AI设计，让每束花都藏着一句未说出口的话
          </p>
          <div class="hero-buttons">
            <router-link
              to="/diy"
              class="btn-primary"
              @click="$store.commit('changeActNum', 0)"
              >开始定制</router-link
            >
            <a href="#featured" class="btn-outline" @click="SlideOut"
              >探索花束</a
            >
          </div>
        </div>
      </div>
    </section>
  </main>
</template>

<script>
export default {
  name: "HomeView",
  data() {
    return {
      // 精选花束数据
      // 每个花束包含id、名称、价格、颜色、花材组合和包装信息
      featuredProducts: [
        {
          id: 1,
          name: "浪漫玫瑰花束",
          price: 199,
          color: "#ffcdd2",
          // 花材数组，包含每种花的id、名称和数量
          flowers: [
            { id: 1, name: "粉玫瑰", quantity: 9 },
            { id: 2, name: "红玫瑰", quantity: 3 },
            { id: 5, name: "满天星", quantity: 5 },
          ],
          // 包装id，对应DIY页面的包装选项
          packaging: 2,
          // 添加图片路径
          image: "@/assets/images/bouquet-preview.jpg",
        },
        {
          id: 2,
          name: "向日葵花束",
          price: 159,
          color: "#fff9c4",
          flowers: [
            { id: 3, name: "向日葵", quantity: 5 },
            { id: 6, name: "绿叶", quantity: 4 },
          ],
          packaging: 1,
          image: "@/assets/images/bouquet-preview.jpg",
        },
        {
          id: 3,
          name: "混合花束",
          price: 179,
          color: "#e8f5e9",
          flowers: [
            { id: 1, name: "粉玫瑰", quantity: 3 },
            { id: 4, name: "百合", quantity: 3 },
            { id: 5, name: "满天星", quantity: 3 },
            { id: 6, name: "绿叶", quantity: 3 },
          ],
          packaging: 3,
          image: "@/assets/images/bouquet-preview.jpg",
        },
        {
          id: 4,
          name: "百合花束",
          price: 229,
          color: "#e1f5fe",
          flowers: [
            { id: 4, name: "百合", quantity: 6 },
            { id: 5, name: "满天星", quantity: 4 },
            { id: 6, name: "绿叶", quantity: 3 },
          ],
          packaging: 2,
          image: "@/assets/images/bouquet-preview.jpg",
        },
      ],
      // 服务优势数据
      benefits: [
        {
          id: 1,
          icon: "🌸",
          title: "新鲜花材",
          description: "每天直接从花卉基地采购，确保花材新鲜度",
        },
        {
          id: 2,
          icon: "🎨",
          title: "专业设计",
          description: "经验丰富的花艺师为您提供专业的设计和建议",
        },
        {
          id: 3,
          icon: "🚚",
          title: "快速配送",
          description: "同城2小时送达，让您的心意及时传递",
        },
        {
          id: 4,
          icon: "💯",
          title: "品质保证",
          description: "7天鲜花保鲜，不满意免费更换",
        },
      ],
      // 客户评价数据
      testimonials: [
        {
          id: 1,
          text: "花漾定制的花束质量非常好，我给妈妈订了一束康乃馨，她非常喜欢！花朵新鲜，包装精美，配送也很及时。",
          author: "李女士",
        },
        {
          id: 2,
          text: "我在这里定制了一束混合花束，花艺师根据我的喜好进行了专业的搭配，效果比我想象的还要好！",
          author: "张先生",
        },
        {
          id: 3,
          text: "朋友生日时我送了一束花漾定制的花束，她收到后非常惊喜，说这是她收到过的最美的花束！",
          author: "王女士",
        },
      ],
    };
  },
  methods: {
    SlideOut() {
      this.$store.commit("changeActNum", 2);
      this.$router.push({
        path: `/diy`,
      });
      setTimeout(() => {
        this.$router.push({
          path: `/diy/diy-popular`,
        });
      }, 1);
    },
    /**
     * 跳转到DIY花束页面并传递选中花束的信息
     * @param {Object} product - 选中的花束产品对象
     */
    goToDIYWithBouquet(product) {
      // 提取需要传递的花束数据
      const bouquetData = {
        id: product.id,
        name: product.name,
        price: product.price,
        flowers: product.flowers,
        packaging: product.packaging,
        image: product.image || "@/assets/images/bouquet-preview.jpg",
      };

      // 将花束数据存储到localStorage，以便在DIY页面获取
      localStorage.setItem("selectedBouquet", JSON.stringify(bouquetData));

      // 跳转到DIY花束页面，并通过URL参数传递模板ID和创作模式
      this.$router.push({
        path: "/diy-bouquet",
        query: {
          template: product.id,
          mode: "free", // 指定使用自由创作模式
        },
      });
    },
  },
};
</script>

<style scoped>
/* 页面整体样式 */
.home-page {
  /* 背景渐变 修改成功✌ */
  background: linear-gradient(to bottom, #d693a1, #fff);
}

/* 英雄/横幅部分样式 */
.hero-section {
  background-image: url("@/assets/背景.jpg");
  background-size: cover;
  background-position: center;
  height: 90vh;
  display: flex;
  align-items: center;
  position: relative;
}

/* 英雄部分半透明遮罩，增加文字可读性 */
.hero-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
}

/* 英雄部分内容样式 */
.hero-content {
  position: relative;
  z-index: 1; /* 确保内容在遮罩上方 */
  max-width: 600px;
  color: white;
}

.hero-title {
  font-size: 3rem;
  margin-bottom: 1.5rem;
}

.hero-description {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

.hero-buttons {
  display: flex;
  gap: 1rem;
}

.btn-large {
  padding: 1rem 2rem;
  font-size: 1.1rem;
}

/* 精选花束部分样式 */
.featured-section {
  padding: 5rem 0;
}

/* 通用标题样式 */
.section-title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #e75480;
}

.section-description {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 3rem;
  color: #666;
}

/* 产品网格布局 */
.featured-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 2rem;
}

/* 产品卡片样式 */
.product-card {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
  cursor: pointer; /* 指示卡片可点击 */
}

/* 卡片悬停效果 */
.product-card:hover {
  transform: translateY(-10px);
}

.product-image {
  height: 200px;
}

.product-info {
  padding: 1.5rem;
}

.product-title {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.product-price {
  font-size: 1.3rem;
  font-weight: bold;
  color: #e75480;
  margin-bottom: 1rem;
}

/* 产品操作按钮布局 */
.product-actions {
  display: flex;
  gap: 0.5rem;
}

/* 按钮样式 */
.product-actions .btn-primary,
.product-actions .btn-outline {
  flex: 1;
  padding: 0.6rem 0;
  text-align: center;
}

.btn-outline {
  background: none;
  border: 1px solid #e75480;
  color: #e75480;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-outline:hover {
  background-color: #f8e1e7;
}

/* DIY按钮样式，添加+号前缀 */
.diy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}

.diy-btn::before {
  content: "+"; /* 添加+号前缀 */
  margin-right: 4px;
  font-weight: bold;
}

/* 服务优势部分样式 */
.benefits-section {
  padding: 5rem 0;
  /* 背景渐变 修改✌*/
  background: linear-gradient(to bottom, #fff, #eed2d8);
  background-color: #f9f9f9;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 2rem;
}

.benefit-card {
  background-color: white;
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.benefit-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.benefit-title {
  font-size: 1.3rem;
  margin-bottom: 1rem;
  color: #e75480;
}

.benefit-description {
  color: #666;
}

/* 客户评价部分样式 */
.testimonials-section {
  padding: 5rem 0;
}

.testimonials-slider {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}

.testimonial-card {
  background-color: white;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.testimonial-text {
  font-style: italic;
  margin-bottom: 1.5rem;
  color: #555;
  line-height: 1.6;
}

.testimonial-author {
  display: flex;
  align-items: center;
}

.author-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #e0e0e0;
  margin-right: 1rem;
}

.author-name {
  font-size: 1.1rem;
  margin-bottom: 0.3rem;
}

.rating {
  color: #ffc107;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2rem;
  }

  .hero-description {
    font-size: 1rem;
  }

  .cta-title {
    font-size: 1.8rem;
  }
}
</style>